import React, { useEffect, useState } from 'react'
import { getPermissionListApi } from '../../services'
import { MenuItem } from '../../types/services'
import { Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';

const Permission: React.FC = () => {
  const [menuList, setMenuList] = useState<MenuItem[]>([])

  const getList = async () => {
    const res = await getPermissionListApi()
    setMenuList(res.data.data.list)
  }

  useEffect(() => {
    getList()
  }, [])

  console.log(menuList)
  const columns: TableProps<MenuItem>['columns'] = [
    {
      title: '权限名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '权限路径',
      dataIndex: 'path',
      key: 'path',
    },
    {
      title: '权限类型',
      key: 'isBtn',
      render: (_, record) => record.isBtn ? <Tag color="green">按钮</Tag> : <Tag color="red">菜单</Tag>
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    }
  ]

  return (
    <div>
      <Table<MenuItem> columns={columns} dataSource={menuList} rowKey="_id" />
    </div>
  )
}

export default Permission